<!DOCTYPE html>
<html>
<head>
	<title>Canvas Demo</title>
	    <style>
      #myCanvas {
        border: 1px solid red;
      }
    </style>
</head>
<body>
 
	<canvas id="myCanvas"></canvas>
	<script>
 // 假设有多个多边形，存储在一个数组中，每个多边形都有一个 name、一个 points 数组表示顶点坐标，以及一个面积 area。
const polygons = [
  {
    name: '#ddd',
    points: [[0, 0], [0, 10], [10, 10], [10, 0]],
    area: 100
  },
  {
    name: '#888',
    points: [[5, 5], [5, 15], [15, 15], [15, 5]],
    area: 100
  },
  {
    name: '#bbb',
    points: [[20, 20], [20, 30], [30, 30], [30, 20]],
    area: 100
  }
]
// 设置排样区域的宽度和高度。
const maxWidth = 400
const maxHeight = 800
// 创建一个空的排样矩阵，用于记录已经放置的多边形的位置。
const matrix = []
for (let i = 0; i < maxHeight; i++) {
  matrix[i] = new Array(maxWidth).fill(0)
}
// 按照面积从大到小排序，依次放置多边形。
polygons.sort((a, b) => b.area - a.area).forEach(polygon => {
  // 从左上角开始找一个空的位置。
  let position = null
  for (let i = 0; i <= maxHeight - polygon.area; i++) {
    for (let j = 0; j <= maxWidth - polygon.area; j++) {
      if (matrix[i][j] === 0) {  // 如果该位置为空，表示可以放置。
        // 检查当前多边形是否会和之前放置的多边形重叠或超出范围。
        let overlap = false
        for (let k = 0; k < polygon.points.length; k++) {
          const x = j + polygon.points[k][0]
          const y = i + polygon.points[k][1]
          if (x < 0 || x >= maxWidth || y < 0 || y >= maxHeight) {  // 超出范围了。
            overlap = true
            break
          }
          if (matrix[y][x] !== 0) {  // 重叠了。
            overlap = true
            break
          }
        }
        if (!overlap) {  // 如果没有重叠或超出范围，则可以放置。
          position = { x: j, y: i }
          break
        }
      }
    }
    if (position) {  // 找到了一个可以放置的位置。
      break
    }
  }
  if (position) {  // 如果找到了位置，则将多边形放置上去。
    for (let k = 0; k < polygon.points.length; k++) {
      const x = position.x + polygon.points[k][0]
      const y = position.y + polygon.points[k][1]
      matrix[y][x] = polygon.name
    }
  } else {  // 如果没有找到位置，则放弃该多边形。
    console.log(`无法放置多边形 ${polygon.name}`)
  }
})
// 输出排样结果。
console.log(matrix)
 
 
		let canvas = document.getElementById("myCanvas");
		let ctx = canvas.getContext("2d");
		canvas.width = 100;
		canvas.height = 100;

 

const cellSize = 10; // 每个单元格的大小

 

canvas.width = maxWidth * cellSize;

canvas.height = maxHeight * cellSize;

// 遍历矩阵并绘制图案

for (let y = 0; y < maxHeight; y++) {

  for (let x = 0; x < maxWidth; x++) {

    if (matrix[y][x] != 0) {

      ctx.fillStyle = matrix[y][x] ; // 填充黑色

      ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize); // 绘制单元格

    }

  }

}
         
	</script>
</body>
</html>